<template>
  <!-- 药品分类选择 -->
  <el-drawer
    title="药品分类："
    size="800px"
    :visible="value"
    custom-class="drawer-box"
    :wrapperClosable="false"
    :destroy-on-close="true"
    @open="onOpen"
    @close="onClose"
    :append-to-body="true"
  >
    <div class="drawer1-box">
      <div>
        <div class="fl-left">
          <el-tree :data="treeData" :props="defaultProps" :highlight-current="true"  node-key="id" @node-click="onNodeClick"></el-tree>
        </div>
        <div class="data-right">
          <div v-for="item in drugList" :key="item.id" style="padding:10px;">
            <el-checkbox v-model="item.check" @change="onChangeDrug(item)">
              {{ item.drugName }}（{{ item.specs }}/{{
              item.packUnit| changeAssist(doseUnitList)
              }}）
            </el-checkbox>
          </div>
          <div v-if="drugList.length == 0" style="color:#999;padding:10px 0;text-align:center;">
            <i class="iconfont iconwushuju" style="font-size:40px;"></i>
            <div>暂无数据</div>
          </div>
          <br />
          <pager v-model="pager" @change-pagenum="getDrug"></pager>
          <br />
        </div>
      </div>
      <div class>
        <div style="border-bottom:1px solid #eee;" class="p-sm">
          <div style>已选药品：{{curDrugList.length>0?'':'暂无'}}</div>
          <div class="p-sm" v-if="curDrugList.length>0">
            <el-tag
              v-for="(item, index) in curDrugList"
              :key="index"
              closable
              @close="onDelTag(item,index)"
              style="margin:0 10px 10px 0;"
            >{{ item.drugName }}（{{ item.specs }}/{{ item.packUnit | changeAssist(doseUnitList) }}）</el-tag>
          </div>
        </div>
        <div style="text-align:right;" class="p-sm">
          <el-button type="primary" @click="onClickItem">保存</el-button>
          <el-button @click="onClose">取消</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
export default {
  props: ["value", "doctorId", "patientId",'channel'],
  components: {},
  data() {
    return {
      defaultProps: {
        children: "child",
        label: "drugTypeName",
      },
      form: {
        type: 1,
        status: 1,
        drugTypeId: "",
      },
      pager: { pageSize: 20, pageNum: 1, total: 0 },
      treeData: [],
      drugList: [],
      curDrugList: [],
      doseUnitList: [],
    };
  },
  async created() {
    await this.getCommonConfigByKey("单位").then((res) => {
      this.doseUnitList = res;
    });
    this.getData();
  },
  methods: {
    //删除已勾选
    onDelTag(obj, index) {
      this.curDrugList.splice(index, 1);
      this.drugList.map((it) => {
        if (obj.id == it.id) {
          it.check = false;
        }
      });
    },
    //勾选药品
    onChangeDrug(obj) {
      let th = this;
      let index = th.curDrugList.findIndex((d) => {
        return d.id == obj.id;
      });
      if (obj.check) {
        if (index == -1) {
          th.curDrugList.push(obj);
        }
      } else {
        if (index > -1) {
          th.onDelTag(index);
        }
      }
    },
    onNodeClick(item, node, self) {
      this.form.drugTypeId = item.id;
      this.getDrug(-1);
    },
    //获取药品
    getDrug(type) {
      let th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let j = {};
      Object.assign(j, th.pager, th.form);
      if (this.channel) {
        j.channel = this.channel;
      }
      th.$api.pageQueryMedicalDrugInfo(j).then((res) => {
        if (res.executed) {
          th.drugList = res.dataBody.list;
          let list = th.curDrugList.reduce((t, c) => {
            if (c) t.push(c.id);
            return t;
          }, []);
          th.drugList.map((it) => {
            if (list.indexOf(it.id) != -1) it.check = true;
          });
          th.pager.total = res.dataBody.total;
        }
      });
    },
    //获取树
    getData() {
      this.$api.getMedicalDrugTypeTree({}).then((res) => {
        if (res.executed) {
          this.treeData = res.data;
          this.form.drugTypeId=this.treeData[0].id;
          this.getDrug(-1);
        }
      });
    },
    onClickItem(obj) {
      let th = this;
      //   th.getDetailCF(obj);
      th.disposeData();
      th.onClose();
    },
    //处理数据
    disposeData() {
      let th = this;
      let arr = [];
      th.curDrugList.forEach((obj) => {
        let j = {
          drugName: obj.drugName,
          sellMoney: obj.sellMoney,
          prescriptionId: "",
          hpId: th.adminUser.hpId,
          patientId: th.patientId,
          deptId: th.adminUser.hpId,
          doctorId: th.doctorId,
          drugId: obj.id,
          groupId: "",
          oneDose: obj.oneDose,
          oneDoseUnit: obj.oneDoseUnit,
          use: obj.defaultUse,
          frequency: obj.defaultFrequency,
          useDay: "",
          useTotal: "",
          totalUnit: obj.packUnit,
          isPiece: obj.isPiece,
          getAddress: "",
          medicalDrugSale: obj.medicalDrugSale,
          id: "",
          specs: obj.specs,
          remark: obj.remark,
          inventory: obj.inventoryStatisticVO ? obj.inventoryStatisticVO : {},
        };
        if (obj.medicalDrugSale) {
          j.getAddress = obj.medicalDrugSale.takeAddress;
        }
        arr.push(j);
      });
      th.$emit("complete", arr);
    },
    onOpen() {
      let th = this;
      th.$nextTick(function () {});
    },
    onClose() {
      let th = this;
      th.curDrugList = [];
      th.drugList = [];
      th.$emit("input", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer1-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  > div:nth-child(1) {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    .fl-left {
      flex-shrink: 0;
      width: 400px;
      overflow: auto;
      height: 100%;
      border-right: 1px solid #eee;
    }
    .data-right {
      flex-grow: 1;
      overflow: auto;
      height: 100%;
    }
  }
  > div:nth-child(2) {
    flex-shrink: 0;
    height: 300px;
    overflow: auto;
    border-top: 1px solid #eee;
  }
}
</style>
